<?php

header('Content-Type: text/html; charset=UTF-8');

$pageTitle = 'Page title';

$mainMenu = array(
	'home' => array(
		'caption' => 'Главная',
		'dir' => '/',
	),
	'company' => array(
		'caption' => 'Компания',
		'dir' => 'company',
	),
	'work' => array(
		'caption' => 'Деятельность',
		'dir' => 'work',
	),
	'gallery' => array(
		'caption' => 'Галерея',
		'dir' => 'gallery',
		'active' => true,
	),
	'contactus' => array(
		'caption' => 'Контакты',
		'dir' => 'contactus',  
	)
);

foreach ($mainMenu as &$item)
{
	$item['url'] = '#'.$item['dir'];
}

function a($text)
{
	return htmlspecialchars($text);
}

function t($text)
{
	return htmlspecialchars($text);
}

class html
{
	
	static
	public
	function img($url, $ctrlParams, $meteData)
	{
		
	}
}

class node
{
	public 
	$style = array();
	
	public 
	$name = array();
	
	public 
	$childs = array();
}


class css
{
	public
	$block = array(
		// other values
		'block', 
		'inline', 
		'list-item', 
		'none',

		// Other values
		'inline-table', 
		'run-in', 
		'table', 
		'table-caption', 
		'table-cell', 
		'table-column-group', 
		'table-footer-group', 
		'table-header-group', 
		'table-row', 
		'table-row-group'); 
}

class rectangle extends node
{
	function validate()
	{
		if (isset($style['display']) && in_array($style['display'], array('block', 'table', 'list-item', 'table-cell', 'inline-table'))) {
			
		}
		if (isset($style['display']) && in_array($style['display'], array('block', 'table-cell'))) {
			
		}
		if (in_array($name, array('div', 'p', 'td', 'table', ''))) {
			
		}
	}
}


?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title><?php echo t($pageTitle);?></title>
<style><!--
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: inherit;
    	font-style: inherit;
    	font-size: 100%;
    	font-family: inherit;
    	vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    }
    body {
    	line-height: 1;
    	color: black;
    	background: white;
    }
    ol, ul {
    	list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: separate;
    	border-spacing: 0;
    }
    caption, th, td {
    	text-align: left;
    	font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: "";
    }
    blockquote, q {
    	quotes: "" "";
    }


    /*====================================================*/

.sys_empty4ie {
    display: none;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}
* html .sys_empty4ie {
    zoom: 1;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}



    /*====================================================*/
    /*====================================================*/

    .polosa {
        /*width: 40em;*/
    }
    .block {
        width: 100%;
    }


    /*====================================================*/

    body {
        background-color: #DCB474;
    }
    .polosa {
        background-color: #FFFFFF;
    }
    h1 {
        font-size: 1.73em;
    }
    h2 {
        font-size: 1.44em;
    }
    h3 {
        font-size: 1.2em;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        Line-height: 1.44;
    }
    h4 {
        font-size: 1em;
    }
    h5 {
        font-size: 1em;
    }
    h6 {
        font-size: 1em;
    }
    h1, h2, h3, h4, h5, h6 {
        margin-left: -0.1em;
        margin-top: 0.5em;
        margin-bottom: 0.25em;
    }
    small {
        font-size: 67%
    }
    .ar {
        text-align: right;
    }
    .num1 {
        width: 2em;
        padding-right: 0.7em;
    }
    .pageNum {
        width: 3em;
        padding-right: 0.2em;
        font-size: 120%;
    }
    .pageCount {
        width: 1em;
    }


    .polosa {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    body {
        font-family:Arial,sans-serif;
        line-height:1.4;
    }
    .slides-bar {
        height: 700px;
        position: relative;
    }
    imd.slide {
        height: 600px;
    }



.t-overlay {
    width: 2000px;
    height: 700px;
    left: 0px;
    top: 0px;
    position: absolute;
}
* html .t-overlay {
    background-color: #C7DEF3;
    filter: alpha(opacity=0);
}
*+html .t-overlay {
    background-color: #C7DEF3;
    filter: alpha(opacity=0);
}

body {
	margin: 0px;
	padding: 0px;
	background: #000000;
}

#main-menu {
	width: auto;
	overflow: hidden;
	overflow-y: hidden;
}
#main-menu td {
	height: 26px;
}
#main-menu a {
	display: block;
	text-transform: uppercase;
	color: #000000;
    width: 165px;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    line-height: 26px;
    border-top: 1px solid #C4C4C4;
    border-bottom: 1px solid #C4C4C4;
    letter-spacing: 2px;
    	 
}
#main-menu .active a,
#main-menu a:hover {
    border-top: 1px solid #616161;
    border-bottom: 1px solid #616161;
	background-color: #000000;	 
	color: #FFFFFF;
}
#top-bar {
	margin-top: 43px;
	width: 100%;
	height: 20px;
	background-color: #C4C4C4;
	overflow: hidden;
	overflow-y: hidden;
}
#tools-place {
	overflow: hidden;
	overflow-y: hidden;
	width: 200px;
}
#tools-place a {
	margin-left: 20px;
}
#menu-place {
	width: auto;
}
#menu-place td {
	border-left: 1px solid #000000;
}
#menu-place table {
	border-right: 1px solid #000000;
	margin-right: 20px;
}
#search-place {
	width: 300px;
}
#search-place * {
	font-size: 80%;
}
#layout {
	width: 1200px;
	background: url(/apper/maket.png) no-repeat #616161;
    background: url(/apper/page-bg.png) repeat-x #383838;
	margin: 0px auto;
	height: 720px;
}
#bottom-bar {
	height: 25px;
	margin-top: 5px;	
	background: url(/apper/bottom-bar-bg.png) repeat-x;
}
#logo {
	width: 118px;
	height: 56px;
	background: url(/apper/logo.png) no-repeat;
	margin: 28px 50px 20px 1062px;
}
#article-part {
	width: 300px;
	height: 517px;
}
#gadget-part {
	vertical-align: top;	
}
.img-gadget td {
	empty-cells: show;
}
.img-gadget  {
	empty-cells: show;
}
.img-gadget {
	border-collapse: separate;
	border-spacing: 3px;
	width: 792px;
	height: 417px;
}
.img-gadget td div {
	background-color: #000000;
	opacity: 0.5;
	width: 196px;
	height: 137px;
}
.img-gadget td {
	background-repeat: no-repeat;
}
.img-gadget td div {
	width: 196px;
	height: 137px;
}
* html .img-gadget td div,
*+html .img-gadget td div {
	filter: alpha(opacity=0.0);
}
.img-gadget td a:hover div {
	background-color: transparent;
}
.img-gadget td a {
	border: 0px solid #000000;
	text-decoration: none;
}
.img-gadget {
	margin-top: 85px;
}
h2 {
	text-transform: uppercase;
	font-size: 12px;
	color: #FFFFFF;
}
h2 .allways-small {
	text-transform: none;
}
#lang-part {
	vertical-align: top;
	width: 25px;
}
#lang-part div {
	margin-top: 230px;
	background-color: #939393;
	padding: 7px 2px 5px 3px;
}
#lang-part a {
	text-align: center;
	display: block;
	width: 25px;
	color: #000000;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 25px;
	font-size: 10px;
}
#lang-part a.active,
#lang-part a:hover {
	color: #FFFFFF;
}
#article-part {
	padding: 0px;
	width: 334px;
	vertical-align: top;
}
#article-part .wrapper {
	margin: 102px 10px 10px 22px;
}
#img-gadget td {
}

--></style>

<!--==============================================================================-->
<!--==============================================================================-->
</head>
<body>
<!--==============================================================================-->
<!--==============================================================================-->

<div id="layout">

<table id="top-bar" cellspacing="0"><tr>
<td id="tools-place">

	<a style="font-size: 1px; line-height: 1px;" href="#" title="Домашняя страница"><img src="/apper/home-ico.png" /></a>
	<a style="font-size: 1px; line-height: 1px;" href="mailto:office@archi.com.ua" title="Отправить письмо"><img src="/apper/mail-ico.png" /></a>
	
</td>

<td id="menu-place">

	<table id="main-menu" cellspacing="0"><tr>
	<?php 
	foreach ($mainMenu as &$item) 
	{
	
		$class = array();
		if (! empty($item['active'])) 
		{
			$class[] = 'active';	
		}
		if (! empty($item['current'])) 
		{
			$class[] = 'current';	
		}
		?><td class="<?php echo a(implode(' ', $class));?>"><?php 
		if (! empty($item['current'])) 
		{
			?><span><?php echo t($item['caption']);?></span><?php 	
		}
		else 
		{
			?><a href="<?php echo a($item['url']);?>"><?php echo t($item['caption']);?></a><?php 	
		}
		?></td><?php 
		
	}
	?>
	</tr></table>

</td>
<td id="search-place" style="white-space: nowrap;">

	<form action="#search/">
	<input type="text" value="Поиск по сайту..." />
	<input type="submit" value="Найти" />
	</form>
	
</td>
</tr></table>

<table id="content" cellspacing="0"><tr>
<td id="lang-part">
	<div>
		<a href="#">UKR</a>
		<a href="#" class="active">RUS</a>
		<a href="#">ENG</a>
	</div>
</td>
<td id="article-part">
	<div class="wrapper">
		<h2>Проект павильона на територии национального комплекса Экспоцентр украины в <span class="allways-small">г</span>. Киеве.</h2>
	</div>
</td>
<td id="gadget-part">


	<?php 
	
	$imgMesh = array(
		array(
			array(
				'src' => 'i/1-1s.png',
				'href' => '#dir/1-1/',
			),
			array(
				'src' => 'i/1-2s.png',
				'href' => '#dir/1-2/',
			),
			array(
				'src' => 'i/1-3s.png',
				'href' => '#dir/1-3/',
			),
			array(
				'src' => 'i/1-4s.png',
				'href' => '#dir/1-4/',
			)
		),
		array(
			array(
				'src' => 'i/2-1s.png',
				'href' => '#dir/2-1/',
			),
			array(
				'src' => 'i/2-2s.png',
				'href' => '#dir/2-2/',
			),
			array(
				'src' => 'i/2-3s.png',
				'href' => '#dir/2-3/',
			),
			array(
				'src' => 'i/2-4s.png',
				'href' => '#dir/2-4/',
			)
		),
		array(
			array(
				'src' => 'i/3-1s.png',
				'href' => '#dir/3-1/',
			),
			array(
				'src' => 'i/3-2s.png',
				'href' => '#dir/3-2/',
			),
			array(
				'src' => 'i/3-3s.png',
				'href' => '#dir/3-3/',
			),
			array(
				'src' => 'i/3-4s.png',
				'href' => '#dir/3-4/',
			)
		),
	);
	
		?><table class="img-gadget" cellspacing="0"><?php
	foreach ($imgMesh as &$row) 
	{
		?><tr><?php
		foreach ($row as &$cell) 
		{
			$cell['width']   = isset($cell['width'])   ? $cell['width']   : 196;
			$cell['height']  = isset($cell['height'])  ? $cell['height']  : 137;
			$cell['rowspan'] = isset($cell['rowspan']) ? $cell['rowspan'] :   1;
			$cell['colspan'] = isset($cell['colspan']) ? $cell['colspan'] :   1;

			$attribs = array();
			if ($cell['rowspan'] != 1) 
			{
				$attribs[] = "rowspan: {$cell['rowspan']}";
			}
			if ($cell['colspan'] != 1) 
			{
				$attribs[] = "colspan: {$cell['colspan']}";
			}
			?><td <?php echo implode(' ', $attribs);?>> 
				<img src="<?php echo a($cell['src']);?>" style="width: <?php echo $cell['width'];?>px; height: <?php echo $cell['height'];?>px;" />
				<a href="<?php echo a($cell['href']);?>" style="width: <?php echo $cell['width'];?>px; height: <?php echo $cell['height'];?>px;"><span></span></a>
			</td><?php 
			
		}
		?></tr><?php
	}
	 ?></table>
<div id="bottom-bar"></div>
<div id="logo"></div>

</div>

<!--==============================================================================-->
<!--==============================================================================-->

</body></html><?php

'
mesh extends block


<mesh cellspacing="[length]">
  <row>
    <cell></cell>
    <cell></cell>
    <cell rowspan="[number]"></cell>
    <cell rowspan="[number]"></cell>
  </row>
  <row>
    <cell colspan="2"></cell>
  </row>
  <row>
    <cell></cell>
    <cell></cell>
  </row>
</mesh>


';



?>